<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            height: 100%;
            padding: 0px;
            margin: 0px;
        }

        .outContainer {
            width: 350px;
            height: 100%;
            border: 2px solid orangered;
            overflow: hidden;
            position: relative;
        }

        .inContainer {
            background-color: green !important;
            overflow-x: hidden;
            overflow-y: scroll;
            position: absolute;
            /*不能使用relative和fixed定位*/
            top: 0;
            bottom: 0;
            /*相当于height:100%时的高度*/
            left: 0;
            right: -17px;
            /*图层宽度大于width:100%,滚动条的宽度刚刚好被隐藏 */
        }

        .inContent {
            height: 350px;
            background-color: lightblue;
        }

        .inContent2 {
            background-color: purple;
        }

        a {
            display: block;
            padding: 2em;
            border: 30px solid;
            border-image: linear-gradient(to right, #ff8a00, #da1b60) 30;
        }

        .item {
            display: inline-block;
            width: 80px;
            height: 80px;
        }

        .item1 {
            background-color: #ff8a00;
        }

        .item2 {
            background-color: #da1b60;
        }

        .item3 {
            background-color: #f44336;
        }

        .item4 {
            background-color: #9c27b0;
        }

        .item5 {
            background-color: #03a9f4;
        }

        .item6 {
            background-color: #4caf50;
        }

        .item7 {
            background-color: #8bc34a;
        }

        @page :right {
            margin-right: 300px;
        }

        .test {
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            margin: 20px auto;
            padding-top: 10px;
            background-color: #c1c2c3;
        }
        .label label {
            display: inline-block;
            width: 50px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #ccc;
            background-color: #d3d4d5;
        }
    </style>

</head>

<body onload="top.resizeTo(300,200);">
    <div>
        <div class="test">1</div>
    </div>
    <div class="label">
        <label for="">1</label>
        <label for="">2</label>
        <label for="">3</label>
    </div>
    <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
        <input type="range" name="b" value="50" /> +
        <input type="number" name="a" value="10" /> =
        <output name="result"></output>
    </form>
    <a href="javascript.:top.window.close();">点击关闭窗口</a>！
    <div class="outContainer">
        <div class="inContainer">
            <div class="inContent"></div>
            <div class="inContent inContent2"></div>
            <div class="inContent"></div>
        </div>
    </div>
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
    <div class="item item5"></div>
    <div class="item item6"></div>
    <div class="item item7"></div>


    <input type="text" id="decode">
    <p id="pp">&</p>

    <script src="./projects/ife05/js/htmlDecode.js"></script>
    <script>
        let inp = document.querySelector("#decode")
        let pp = document.querySelector("#pp")
        let p = pp.innerHTML
        let div = document.createElement("div")
        div.innerHTML = p
        console.log(p);
        console.log(pp.innerText);
        console.log(div.innerHTML);
        
        console.log(div.innerText);
        
        
        inp.oninput = function (e) {
            
            console.log(this.value);
            let encode = HtmlUtil.htmlEncode(this.value)
            console.log(encode)
            console.log(HtmlUtil.htmlDecode(encode));
            
        }
    </script>
</body>

</html>